<script setup lang="ts">
import { useI18n } from "vue-i18n";
import { useRouter } from "vue-router"; // 引入路由
import useFormProperties from "@/composables/login/useFormProperties"; // 变量 hook
import useFormOperate from "@/composables/login/useFormOperate"; // 函数 hook

const router = useRouter();
const { t } = useI18n();
const { activeName, loginText, ruleForm, rules, ruleFormRef } = useFormProperties(t);
const { userSign, userLogin } = useFormOperate(router, ruleForm);

// 切换标签事件
function handleClick(e: any) {
  const { name } = e.props;
  loginText.value = t(`login.${name}Btn`);
}
// 点击提交事件
function submitForm() {
  ruleFormRef.value.validate((valid: any) => {
    if (valid) {
      if (activeName.value === "sign") {
        userSign(ruleForm);
      } else {
        userLogin(ruleForm);
      }
    } else {
      return false;
    }
  });
}
</script>

<template>
  <div class="login-page">
    <div class="left-part"></div>
    <div class="right-part">
      <div class="login-panel">
        <!-- tabs组件 -->
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane name="login" :label="t('login.loginTab')"></el-tab-pane>
          <el-tab-pane name="sign" :label="t('login.signTab')"></el-tab-pane>
        </el-tabs>
        <!-- 表单组件 -->
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
        >
          <el-form-item prop="mobile">
            <el-input :placeholder="t('login.placeMobile')" v-model="ruleForm.mobile"></el-input>
          </el-form-item>
          <el-form-item prop="possword">
            <el-input :placeholder="t('login.placePass')" v-model="ruleForm.password"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="submitForm">{{ loginText }}</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
@import "@/assets/scss/login/index.scss";
</style>
